<%--
  Created by IntelliJ IDEA.
  User: Gao
  Date: 2021/8/19
  Time: 11:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<input type="button" value="get方式请求服务器" onclick="ajaxGet()"/> <span id="spanId1"></span> <br/>
    <input type="button" value="post方式请求服务器" onclick="ajaxPost()"/> <span id="spanId2"/><br/>
    <input type="button" value="ajax方式请求服务器" onclick="ajax()"/><br/>

    <script src="<%=request.getContextPath()%>/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        function ajaxGet() {
            // $.get(url, [data], [callback], [type])
            $.get('<%=request.getContextPath()%>/ajax',
                 {'name' : 'zhangsan'},
                 function(data) {// callback：表示服务器端成功响应所触发的函数
                    // 后台返回的是json对象，但是ajax自动会把json格式对象转换成js对象
                    console.log(data);
                    // {name: "李四", age: 23}
                    $('#spanId1').html(JSON.stringify(data));
                 },
                 'json'
            );
        }

        function ajaxPost() {
            // $.post(url, [data], [callback], [type])
            $.post('<%=request.getContextPath()%>/ajax',
                {'name' : 'zhangsan'},
                function(data) {// callback：表示服务器端成功响应所触发的函数
                    // 后台返回的是json对象，但是ajax自动会把json格式对象转换成js对象
                    console.log(data);
                    // {name: "李四", age: 23}
                    $('#spanId2').html(JSON.stringify(data));
                },
                'json'
            );
        }

        function ajax() {
            // $.ajax( { option1:value1,option2:value2... } );
            $.ajax({
                async : true,
                type : 'POST',
                url : '<%=request.getContextPath()%>/ajax',
                data : {'name' : '校招'},
                success : function(jsonObj) {
                    console.log(jsonObj);
                },
                dataType : 'json',
            });
        }
    </script>

</body>
</html>
